<template>
  <div>
    <header class="app-header">
      <!-- <header class="app-header" v-show="!isShow"> -->
      <span>宝典</span>
    </header>
    <div class="core-container">
      <div class="scroll-wrapper" ref="scroll">
        <div>
          <div class="pulldown-wrapper">
            <div v-show="beforePullDown">
              <span>下拉刷新...</span>
            </div>
            <div v-show="!beforePullDown">
              <div v-show="isPullingDown">
                <span>Loading...</span>
              </div>
              <div v-show="!isPullingDown">
                <span>刷新成功</span>
              </div>
            </div>
          </div>
          <div class="scroll-content">
            <div
              class="scroll-item"
              v-for="(item, index) in data"
              :key="index"
              @click="clickHandler(item)"
              :class="{ active: bdids.includes(item.id) }"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="pullup-tips">
            <div
              v-show="isPullUpLoad"
              v-if="!isPullUpNoMore"
              class="before-trigger"
            >
              <span class="pullup-txt">上拉加载更多</span>
            </div>
            <div v-show="!isPullUpLoad" class="after-trigger">
              <span class="pullup-txt">Loading...</span>
            </div>
            <div v-show="isPullUpNoMore" class="after-trigger">
              <span class="pullup-txt">没有更多数据了</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <detailsCopy v-show="isShow" :item="isItems" /> -->
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import PullDown from "@better-scroll/pull-down";
import Pullup from "@better-scroll/pull-up";
BScroll.use(Pullup);
BScroll.use(PullDown);
import { mapActions, mapState } from "vuex";
import detailsCopy from "./details";
import { getItem } from "../../utils/sessiton";
export default {
  name: "msbd",
  data() {
    return {
      beforePullDown: true,
      isPullingDown: false,
      isPullUpLoad: true,
      isPullUpNoMore: false,
      shop: 56,
      isShow: false,
      isItems: {},
      y: 0,
    };
  },
  async mounted() {
    this.setSchedule({ bdid: this.data.id });
    this.init();
    await this.getList();
    this.bs.refresh();
    this.getSchedule(getItem().id);
    console.log(this.total);
  },
  beforeDestroy() {
    this.bs.destroy();
  },
  methods: {
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        probeType: 3,
        click: true,
        bounceTime: 800, //
        pullDownRefresh: {
          threshold: 80,
          stop: this.shop,
        },
        pullUpLoad: true,
        startY: sessionStorage.getItem("y") * 1 || 0,
      });
      this.bs.on("pullingDown", this.pullingDownHandler);
      this.bs.on("pullingUp", this.pullingUpHandler);
      this.bs.on("scrollEnd", ({ y }) => {
        sessionStorage.setItem("y", y);
      });
      this.bs.on("scroll", ({ y }) => {
        this.y = y;
      });
    },
    //下拉刷新
    async pullingDownHandler() {
      this.beforePullDown = false;
      this.isPullingDown = true;
      this.$store.commit("msbd/SET_CURRENTPAGE", 0);
      await this.getList();
      this.isPullingDown = false;
      this.bs.refresh();
      this.isPullUpNoMore = false;
      setTimeout(() => {
        this.bs.finishPullDown();
        this.beforePullDown = true;
      }, 500);
    },
    //下拉加载
    async pullingUpHandler() {
      this.isPullUpLoad = false;
      if (this.currentPage < Math.ceil(this.total / 20)) {
        this.$store.commit("msbd/SET_CURRENTPAGE", this.currentPage + 1);
        await this.getList();
        this.isPullUpNoMore = false;
      } else {
        this.isPullUpNoMore = true;
      }
      this.isPullUpLoad = true;
      this.bs.finishPullUp();
      this.bs.refresh();
    },
    clickHandler(item) {
      this.$router.push(`/details/${item.id}`);

      this.getDiscussList(item.id);
      // this.isShow = true;
      // this.isItems = item;
    },
    ...mapActions("msbd", ["getList", "getSchedule", "setSchedule"]),
    ...mapActions("discuss", ["getDiscussList"]),
  },
  computed: {
    ...mapState("msbd", ["data", "currentPage", "total", "bdids"]),
  },
  components: {
    detailsCopy,
  },
};
</script>

<style scoped>
.core-container .scroll-wrapper {
  height: calc(100vh - 120px);
  overflow: hidden;
}
.core-container .scroll-wrapper .scroll-item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  text-indent: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.core-container .scroll-wrapper .scroll-item.active {
  color: #999;
}

.core-container .scroll-wrapper .scroll-item:nth-child(2n) {
  background-color: #f3f5f7;
}

.core-container .scroll-wrapper .scroll-item:nth-child(2n + 1) {
  background-color: #42b983;
}

.pulldown-wrapper {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%) translateZ(0);
  text-align: center;
  color: #999;
}

.pullup-tips {
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>